<template>
  <el-select
    v-bind="$attrs"
    v-model="modelValue"
    @change="handleChange"
    clearable
  >
    <el-option
      v-for="option in options"
      :key="option.value"
      :label="option.label"
      :value="option.value"
      :disabled="option.disabled"
    />
  </el-select>
</template>

<script lang="ts" setup>
import { ElSelect, ElOption } from "element-plus"

interface SelectOption {
  label: string
  value: string | number
  disabled?: boolean
}

interface IProps {
  options: SelectOption[]
}

const modelValue = defineModel<string | number>({
  required: true
})

 defineProps<IProps>()
const emits = defineEmits([ "change"])


function handleChange(value: any) {
  emits("change", value)
}

defineExpose({
  handleChange
})
</script>
